var topLeftImg = document.querySelector('.top')
var retImg = document.querySelector('.retImg')
var setLeftImg = document.querySelector('.banRight')
var imgIndex = null;//图片下标
var maxIndexImg = 15;//最大下标图片
var bannerImg = document.querySelector('#bannerImg')//中心版图
var newIndex = null//能能被9整除把数字挂这
var isGamOver = false//游戏是否结束


// 随机数字
function randomHandel(min, max) {
    return Math.floor(Math.random() * (max - min + 1) - min)
}

// 创建图片
function createLeftImg() {
    // 先清空图片
    setLeftImg.innerHTML = ''

    // 找出能被9 整除的数放进去，剩下的随机放
    var setRandom = randomHandel(0, maxIndexImg)
    console.log('随机数', setRandom);

    for (var i = 0; i < 100; i++) {
        if (i % 9 === 0) {
            newIndex = setRandom
            imgIndex = newIndex
        } else {
            // 不能被9整除的 随机范进imgIndex下标
            imgIndex = randomHandel(0, maxIndexImg)
        }
        setLeftImg.innerHTML += `<div class='item'>
            <span>${i}</span>
            <span>
                <img src='../images/values/${imgIndex}.png'/>
            </span>
        </div>`
    }
}

// 点击事件
function bindEvent() {
    topLeftImg.onclick = function (e) {
        if (!isGamOver) {
            isGamOver = true
            console.log('点击');
            e.currentTarget.style.transition = 'all 1.5s'
            e.currentTarget.style.transform = 'rotate(1800deg)'
            // 动画结束后执行
            topLeftImg.addEventListener('transitionend', dongHua)
        } else {
            console.log('游戏结束');
            if (window.confirm('在来亿把！！！！！！！！！！！！！！！！！')) {
                createLeftImg()
                isGamOver = false
                retImg.style.opacity = 0
                bannerImg.style.display = 'block'
                // 删除动画
                topLeftImg.setAttribute('style', '')
                topLeftImg.removeEventListener('transitionend', dongHua)
            }
        }
    }
}
// 动画
function dongHua() {
    bannerImg.style.display = 'none'
    retImg.style.opacity = 1
    retImg.src = `../images/values/${newIndex}.png`
}

function init() {
    // 创建图片
    createLeftImg()

    // 点击事件
    bindEvent()
}
// 启动
init()